<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">VNPrice CMS 2012</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about" id="websetting" data-rel="/index.php/admin/setting/websetting">Website Setting</a></li>
                    <li><a href="#contact" id="usersetting" data-rel="/index.php/admin/setting/usersetting">Users management</a></li>
                </ul>
                <p class="navbar-text pull-right">Xin chào <a href="/index.php/admin/login/logout">{u_name}</a></p>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>
<script>
//Website setting
$('#websetting').click(function(){
    var title = $(this).text();
    var url_iframe = $(this).attr('data-rel');
    var id_tab='s1';
    $('.nav-tabs').find('li').removeClass('active');
        //Thêm tab mới
    $('.nav-tabs').append('<li class="active" data-id="'+id_tab+'"><a href="#'+id_tab+'" data-toggle="tab">'+title+'&nbsp;&nbsp;<span class="close">&times</span></a></li>');
    
    $('.tab-content').find('.tab-pane').removeClass('active');
    //Thêm iframe mới
    $('.tab-content').append('<div class="tab-pane active" id="'+id_tab+'"><iframe id="'+id_tab+'" class="mainframe" src="'+url_iframe+'"></iframe></div>');
    
    //Đóng iframe, đóng tab
    $('.nav-tabs .close').click(function(){
        var id_close = $(this).closest('li').attr('data-id');
        $('.nav-tabs').find('li').removeClass('active');
        $('.tab-content').find('.tab-pane').removeClass('active');
        $('.nav-tabs').find('li:first').addClass('active');
        $('#1').addClass('active');
        
        //Xóa iframe cũ
        $('#'+id_close).remove();
        $(this).closest('li').remove();
    });
    $('iframe').load(function() {
        this.style.height = (this.contentWindow.document.body.offsetHeight + 100) + 'px';
    });
});


//Website setting
$('#usersetting').click(function(){
    var title = $(this).text();
    var url_iframe = $(this).attr('data-rel');
    var id_tab='s2';
    $('.nav-tabs').find('li').removeClass('active');
        //Thêm tab mới
    $('.nav-tabs').append('<li class="active" data-id="'+id_tab+'"><a href="#'+id_tab+'" data-toggle="tab">'+title+'&nbsp;&nbsp;<span class="close">&times</span></a></li>');
    
    $('.tab-content').find('.tab-pane').removeClass('active');
    //Thêm iframe mới
    $('.tab-content').append('<div class="tab-pane active" id="'+id_tab+'"><iframe id="'+id_tab+'" class="mainframe" src="'+url_iframe+'"></iframe></div>');
    
    //Đóng iframe, đóng tab
    $('.nav-tabs .close').click(function(){
        var id_close = $(this).closest('li').attr('data-id');
        $('.nav-tabs').find('li').removeClass('active');
        $('.tab-content').find('.tab-pane').removeClass('active');
        $('.nav-tabs').find('li:first').addClass('active');
        $('#1').addClass('active');
        
        //Xóa iframe cũ
        $('#'+id_close).remove();
        $(this).closest('li').remove();
    });
    $('iframe').load(function() {
        this.style.height = (this.contentWindow.document.body.offsetHeight + 100) + 'px';
    });
});
</script>